<!-- 进度条2.html -->
<!-- 进度条.html -->
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>进度条</title>
	<style>
	.progress{
		width:700px;
		background: #ccc;
		height: 50px;
		margin: 300px auto;
		border-radius: 10px;
	}
	#bar{
		animation:mymove 1s infinite;
		height: 100%;
		width:50px;
		border-radius: 10px;
		position: relative;
	}
	#persent{

		position: absolute;
		right:-5px;
		top:-20px;
		font-family: "黑体";
	}
	@keyframes mymove{
		0%{background: linear-gradient(to left,#B848FF,#6F57BC,blue,#6B9BC3,#4DE923,yellow,#FA9429,red);}
		12%{ background:linear-gradient(to left,#B848FF,blue,#6B9BC3,#4DE923,yellow,#FA9429,red,#6F57BC);}
		25%{background: linear-gradient(to left,blue,#6B9BC3,#4DE923,yellow,#FA9429,red,#B848FF,#6F57BC);}
		37%{background: linear-gradient(to left,#6B9BC3,#4DE923,yellow,#FA9429,red,#B848FF,#6F57BC,blue);}
		50%{ background:linear-gradient(to left,#4DE923,yellow,#FA9429,red,#B848FF,#6F57BC,blue,#6B9BC3);}
		62%{ background:linear-gradient(to left,yellow,#FA9429,red,#B848FF,#6F57BC,blue,#6B9BC3,#4DE923);}
		75%{ background:linear-gradient(to left,#FA9429,red,#B848FF,#6F57BC,blue,#6B9BC3,#4DE923,yellow);}
		87%{ background:linear-gradient(to left,red,#B848FF,#6F57BC,blue,#6B9BC3,#4DE923,yellow,#FA9429);}
		100%{ background:linear-gradient(to left,#B848FF,#6F57BC,blue,#6B9BC3,#4DE923,yellow,#FA9429,red);}
	}
	/*彩色滚动*/
	/*@keyframes mymove{
		0%{background: radial-gradient(white 10%,red);}
		12%{ background:radial-gradient(white 10%,#FA9429);}
		25%{background: radial-gradient(white 10%,yellow);}
		37%{background: radial-gradient(white 10%,#4DE923);}
		50%{ background:radial-gradient(white 10%,#6B9BC3);}
		62%{ background:radial-gradient(white 10%,blue);}
		75%{ background:radial-gradient(white 10%,#6F57BC);}
		87%{ background:radial-gradient(white 10%,#B848FF);}
		100%{ background:radial-gradient(white 10%,red);}
	}*/
	/*变色*/
	</style>
</head>
<body>
	<div class="progress">
		<div id="bar">
			<div id="persent"></div>
		</div>
	</div>
	<script>
	var bar =document.getElementById('bar');
	var persent=document.getElementById('persent');
	var step=1;
	var oWidth=0;
	
	//bar.style.width="300px";
	var timerId =setInterval(function(){
		oWidth+=step;
		bar.style.width=oWidth+"%";
		persent.innerHTML=oWidth+"%";
		if(oWidth==100){
			clearInterval(timerId);N
		}
	},100);
	

	</script>
</body>
</html>